<template>
  <div class="page-container">
    <div class="control-container">
      <div class="right-panel">
        <el-tabs v-model="query.type" @tab-click="handleClick">
          <el-tab-pane label="实时一览废水配置" name="e012_02" />
          <el-tab-pane label="实时一览废气配置" name="e012_01" />
        </el-tabs>
        <div class="search-panel">
          <el-form :inline="true" label-width="100">
            <el-form-item label="因子名称">
              <el-input v-model="query.name" class="w-100" placeholder="请输入因子名称" />
            </el-form-item>
            <el-button type="primary" @click="handleSelect">查询</el-button>
          </el-form>
        </div>
        <div class="table-panel">
          <el-table
            v-loading="tableLoading"
            class="grid-data-table"
            height="calc(100vh - 400px)"
            :data="tableData"
          >
            <el-table-column align="center" type="index" width="80" />
            <el-table-column prop="name" label="名称">
              <template slot-scope="scope">
                {{ scope.row.name }} ({{ scope.row.measurementUnit }})
              </template>
            </el-table-column>
            <el-table-column prop="sorting" label="排序">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sorting" oninput="value=value.replace(/[^\d]/g,'')" style="width: 60px" @change="handleSave(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column prop="val" label="实时值">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.val"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="handleSave(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getList, edit } from '@/api/base/configuration'
export default {
  name: 'Overview',
  data() {
    return {
      tableLoading: false,
      query: {
        name: '',
        type: 'e012_02'
      },
      tableData: []
    }
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      this.checkedCities = []
      this.configList = []
      this.handleSelect()
    },
    // 查询
    handleSelect() {
      const query = JSON.parse(JSON.stringify(this.query))
      getList(query).then(res => {
        this.tableData = res.data.list
      })
    },
    // 保存
    handleSave(val) {
      edit(val).then(() => {
        this.$message({
          type: 'success',
          message: '修改成功'
        })
      }).catch(() => {
      })
    },
    handleClick() {
      this.init()
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
